<template>
  <view class="tabBox" v-if="show">
    <view class="tabHeight" :style="{ height: boxHeight + 0.5 + 'rpx' }"></view>
    <view :class="[border == 1 ? 'tab-bar border' : 'tab-bar']">
      <!-- <view class="tab-bar-box" v-if="type==0">
        <view
          v-for="(item, index) in list"
          class="tab-bar-item pr"
          @click="switchTab(item.pagePath, index)"
        >
          <image
            :src="selected === index ? item.selectedIconPath : item.iconPath"
          ></image>
          <view v-if="index == 2&&count!=0" class="pa tag fr jcc aic" style="top: -10rpx;right: 5rpx;">
            {{count}}
          </view>
          <view
            :style="{ color: selected === index ? selectedColor : color }"
            >{{ item.text }}</view
          >
        </view>
      </view> -->
      <view class="tab-bar-box">
        <view
          v-for="(item, index) in listTwo"
          class="tab-bar-item"
          :key="index"
          @click="switchTab(item.pagePath, index)"
        >
          <image
            :src="selected === index ? item.selectedIconPath : item.iconPath"
          ></image>
          <view
            :style="{ color: selected === index ? selectedColor : color }"
            >{{ item.text }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      color: "#666666",
      selectedColor: "#666666",
      boxHeight: 0,
      list: [],
      show: true,
      listTwo: [
        {
          text: "族谱",
          pagePath: "/pages/index/index",
          iconPath: "/static/bar/1.png",
          selectedIconPath: "/static/bar/1-1.png",
        },
				{
				  text: "宋氏文化",
				  pagePath: "/pagesExtend/culture/index",
				  iconPath: "/static/bar/2.png",
				  selectedIconPath: "/static/bar/2-2.png",
				},
				{
				  text: "宋氏宗亲会",
				  pagePath: "/pagesExtend/zongqinhui/zongqinhui_index",
				  iconPath: "/static/bar/3.png",
				  selectedIconPath: "/static/bar/3-3.png",
				},
				{
				  text: "道行天下",
				  pagePath: "/pagesExtend/mall/mall",
				  iconPath: "/static/bar/4.png",
				  selectedIconPath: "/static/bar/4-4.png",
				},
        {
          text: "我的",
          pagePath: "/pages/my/my",
          iconPath: "/static/bar/5.png",
          selectedIconPath: "/static/bar/5-5.png",
        },
      ],
    };
  },
  props: {
    selected: {
      type: Number,
      value: 0,
    },
    border: {
      type: Number,
      value: 0,
    },
    type: {
      type: Number,
      value: 1,
    },
    count: {
      type: Number,
      value: 0,
    }
  },
  mounted() {
    // this.show = uni.getStorageSync('platform') == 'Wx' ? false : true
    // this.show = true
    if (this.show) {
      let that = this;
      // const query = uni.createSelectorQuery().in(this);
      // query
      //   .select(".tab-bar")
      //   .boundingClientRect((data) => {
      //     console.log(data)
      //     that.boxHeight = data.height * 2;
      //     this.$emit("getMounted", data.height * 2);
      //   })
      //   .exec();
        that.boxHeigh = 116
    }
  },
  methods: {
    switchTab(url, index) {
      console.log(url, index)
      // let user_info = uni.getStorageSync("user_info");
      // if (index == 2 && user_info.if_edit_phone == 1) {
      //   let url2 = "/pages/login/login";
      //   msg("请先登录");
      //   setTimeout(() => {
      //     uni.navigateTo({
      //       url: url2,
      //     });
      //   }, 1000);
      //   return false;
      // }
      uni.redirectTo({
        url,
      });
      // uni.navigateTo({
      //   'url': url
      // });
    },
  },
};
</script>

<style lang="scss">
.tabHeight {
  width: 100vw;
  background: rgba(255, 255, 255, 0);
}

.tab-bar {
  position: fixed;
  box-shadow: 0px -8rpx 20rpx rgba(0, 0, 0, 0.06);
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 116rpx;
  display: flex;
  align-items: center;
  z-index: 999;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}

.border {
  box-shadow: 0px -8rpx 20rpx rgba(0, 0, 0, 0.06);
}

.tab-bar-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 2;
}

.tab-bar-item {
  width: 50%;
  text-align: center;
}

.tab-bar-item image {
  width: 44rpx;
  height: 44rpx;
  display: block;
  margin: 0 auto;
}

.tab-bar-item .imgTwo {
  width: 115rpx;
  height: 52rpx;
}

.tab-bar-item view {
  font-size: 20rpx;
  margin-top: 9rpx;
  font-family: "PingFangSC-Medium";
}
.tag{
  width: 24rpx;
  height: 24rpx;
  background: #ff0000;
  border-radius: 50%;
  color: white;
}
</style>
